"use client";
import { Layout, Button } from "antd";
import "./header.scss";
import Image from "next/image";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { useState, useEffect } from "react";
const { Header: AntdHeader } = Layout;
export default function Header() {
  const router = useRouter();
  const pathname = usePathname();
  const [activeMenu, setActiveMenu] = useState<string>("/");
  const menuList = [
    {
      title: "首页",
      path: "/",
    },
    // {
    //   title:'分类',
    //   path:'/category'
    // },
    {
      title: "关于我",
      path: "/about",
    },
  ];
  // 根据路径设置activeMenu
  useEffect(() => {
    setActiveMenu(pathname);
  }, [pathname]);
  return (
    <AntdHeader className="header-container">
      <div
        className="flex  items-center
      text-black
       mx-auto
      "
      >
        <Image
          src="/next.svg"
          alt="logo"
          width={100}
          height={100}
          unoptimized={true}
        />
        <div className="text-black ml-50 flex-1  flex">
          {menuList.map((item) => (
            <Link
              href={item.path}
              key={item.title}
              className={`mr-4 text-black ${
                activeMenu === item.path ? "border-b-2 border-black" : ""
              }`}
              onClick={() => {
                console.log(item.path, " border-b-2 border-black");
                setActiveMenu(item.path);
              }}
            >
              {item.title}
            </Link>
          ))}
        </div>
        <div></div>
        <Button type="primary" onClick={() => router.push("/publish")}>
          发布
        </Button>
        {/* {activeMenu === "/" ? (
          <Button type="primary" onClick={() => router.push("/publish")}>
            发布
          </Button>
        ) : null} */}
      </div>
    </AntdHeader>
  );
}
